<template>
  <div>
    <table border="1" height="60px" width="600px">
      <tr>
        <td>苹果10￥/斤,折扣8折</td>
      </tr>
      <tr>
        <!-- 给输入框加v-model  点击才改变，所以把数据放在对象里-->
        <td>请输入你要购买的斤数<input type="text" v-model.number="form.msg"/></td>
      </tr>
      <tr>
        <td></td>
      </tr>{{money}}<tr>
        <!-- 给按钮绑定一个点击事件 -->
        <button @click.prevent="add">结账买单~</button> 
      </tr>
      <tr>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      start:{
        apple:10,
        msg:1
      },
    form:{
      apple:'',
        msg:''
    },
      money:'结账单:总价：0￥元 折后价：0￥元  省了：0￥元'
    };
  },
  methods:{
    add(){
      // 点击再把数据给到form
      this.form = this.start
      // console.log(this.form.msg);
     this.form.sum = this.form.msg*this.form.apple;
    //  console.log(this.form.sum)
     this.form.b = this.form.apple*0.8*this.form.msg
     this.form.c = this.form.msg*this.form.apple*0.2
     this.money = `结账单:总价：${this.form.sum}￥元 折后价：${this.form.b}￥元  省了：${this.form.c}￥元`

    },
  }
};
</script>

<style scoped></style>
